<template>
  <div class="Header">
    <a href="/" class="logo">
      <span class="Fuma">好学网</span>
      <span class="MX">你的在线课堂</span>
    </a>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
.Header{
    width:100%;
    height:50px;
    background-color: #222d32;
    .logo{
        width: 280px;
        height: 100%;
        padding-left: 10px;
        background-color: #231f20;
        line-height: 48px;
        float: left;
        transition: all .3s ease-out;
        >span {
          float: left;
          font-weight: 700;
          font-size: 23px;
        }
        .Fuma {
          color: #ccc;
          text-shadow: 1px 1px 1px #999;
        }
        .MX {
          color: red;
          text-shadow: 1px 1px 1px #fff;
        }
    }
}
</style>